<template>
  <!-- 社交活动 -- 留言板 -->
  <div class="user-activity">
    <el-card shadow="hover">
      <el-form ref="queryParma" label-position="right" :model="queryParma" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="14">
            <el-form-item label="搜索：" label-width="100px" show-message prop="queryXX">
              <el-input v-model="queryParma.queryXX" placeholder="输入用户编号、用户名称、留言板内容、进行模糊查询" />
            </el-form-item>
          </el-col>
          <el-col :span="10" align="right">
            <el-button-group>
              <el-button type="primary" :loading="queryLoading" icon="el-icon-search" @click="submitForm">搜索</el-button>
              <el-button type="info" icon="el-icon-circle-close" @click="resetForm('queryParma')">重置</el-button>
              <el-tooltip class="item" effect="dark" content="我要留言" placement="bottom">
                <el-button type="success" icon="el-icon-edit" @click="showModal({},'add')" />
              </el-tooltip>
            </el-button-group>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div v-for="(item,index) of datasource" :key="index" class="post" size="large">
        <div class="user-block">
          <img class="img-circle" :src="item.avatar">
          <span class="username text-muted">{{ item.userName }}</span>
          <span class="description">{{ item.roleName }} - {{ item.createTime }} - {{ item.regionName }}</span>
        </div>
        <p>
          {{
            item.activityContent
          }}
        </p>
        <ul class="list-inline">
          <li>
            <span class="link-black text-sm" @click="setDisLike(item)">
              <i class="el-icon-star-off" />
              DisLike
            </span>{{ item.dislikeCount }} -
          </li>
          <li>
            <span class="link-black text-sm" @click="setlike(item)">
              <i class="el-icon-star-on" />
              Like
            </span>{{ item.likeCount }} +
          </li>
          <li style="position: absolute; right: 20px">
            <span v-if="item.activityUserCode === usercode" class="link-black text-sm" @click="showModal(item,'edit')">
              <i class="el-icon-edit-outline" />
              编辑
            </span>
          </li>
          <li style="position: absolute; right: 100px">
            <span v-if="item.activityUserCode === usercode" class="link-black text-sm" @click="dropOne(item)">
              <i class="el-icon-delete" />
              删除
            </span>
          </li>
          <li v-if="item.activityUserCode === usercode" style="position: absolute; right: 180px">
            <span v-if="!isshowTophandle(item)" class="link-black text-sm" @click="setTop(item)">
              <i class="el-icon-upload2" />
              置顶
            </span>
            <span v-if="isshowTophandle(item)" class="link-black text-sm" @click="setUnTop(item)">
              <i class="el-icon-download" />
              取消置顶
            </span>
          </li>
        </ul>
      </div>
      <!--    分页展示-->
      <div class="block" align="center">
        <div class="block">
          <!--        默认 固定页大小 5-->
          <el-pagination
            :current-page.sync="queryParma.index"
            :page-size="5"
            layout="total, prev, pager, next"
            :total="totals"
            @current-change="handleCurrentChange"
          />
        <!--          @size-change="handleSizeChange"-->
        </div>
      </div>
      <!--    轮盘图展示例子 暂未实现-->
      <!--    <div class="post">
      <div class="user-block">
        <img class="img-circle" :src="'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg'+avatarPrefix">
        <span class="username">Spider Man</span>
        <span class="description">Posted 4 photos - 2 days ago</span>
      </div>
      <div class="user-images">
        <el-carousel :interval="6000" type="card" height="220px">
          <el-carousel-item v-for="item in carouselImages" :key="item">
            <img :src="item+carouselPrefix" class="image">
          </el-carousel-item>
        </el-carousel>
      </div>
      <ul class="list-inline">
        <li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
        <li>
          <span class="link-black text-sm">
            <svg-icon icon-class="like" /> Like</span>
        </li>
      </ul>
    </div>-->
      <ActivityModal ref="activitymodal" @refreshDataMethod="getData" />
    </el-card>
  </div>
</template>

<script>
import { dropUserActiviInfoData, setDisLikeOneActiviInfoData } from '@/api/useractivityInfo'
import { getUserCode } from '@/utils/auth'
const { getMenus } = require('@/utils/profileStatus')
const { getUserActiviInfoData, setLikeOneActiviInfoData, setTopOneActiviInfoData, setUnTopOneActiviInfoData } = require('@/api/useractivityInfo')
const avatarPrefix = '?imageView2/1/w/80/h/80'
const carouselPrefix = '?imageView2/2/h/440'
import ActivityModal from './ActivityModal'
export default {
  name: 'Activity',
  components: {
    ActivityModal
  },
  data() {
    return {
      queryLoading: false,
      datasource: [], // 数据集合
      usercode: getUserCode(),
      totals: 0, // 数据总数
      queryParma: { // 请求参数
        queryXX: '',
        index: 1,
        size: 5
      },
      carouselImages: [
        'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
        'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
        'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
        'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
      ],
      avatarPrefix,
      carouselPrefix
    }
  },
  inject: ['reload'],
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.getUserActiviInfo()
    },
    setlike(obj) {
      this.likehandle(obj)
    },
    setDisLike(obj) {
      this.dislikehandle(obj)
    },
    dropOne(obj) {
      this.drophandle(obj)
    },
    setTop(obj) {
      this.setTophandle(obj)
    },
    setUnTop(obj) {
      this.setUnTophandle(obj)
    },
    async getUserActiviInfo() {
      const res = await getUserActiviInfoData(this.queryParma)
      const data = res.data.main
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200 && getMenus() === 'activity') {
        this.$message({
          type: 'success',
          iconClass: 'el-icon-loading',
          message: '留言板信息刷新成功,刷新时间：' + header.respTime,
          duration: 1.5 * 1000
        })
        // 查询成功后 设置参数用于渲染数据
        this.datasource = data.dataArray
        // 设置分页参数
        this.queryParma.index = data.currentPage
        this.totals = data.totalsData
      } else {
        console.log('error:' + header.msg)
      }
    },
    async likehandle(obj) {
      const res = await setLikeOneActiviInfoData(obj)
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200) {
        this.getData() // 刷新数据
      } else {
        this.$message({
          type: 'error',
          message: '操作出错，请刷新重试！',
          duration: 1 * 1000
        })
      }
    },
    async dislikehandle(obj) {
      const res = await setDisLikeOneActiviInfoData(obj)
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200) {
        this.getData() // 刷新数据
      } else {
        this.$message({
          type: 'error',
          message: '操作出错，请刷新重试！',
          duration: 1 * 1000
        })
      }
    },
    async setTophandle(obj) {
      const res = await setTopOneActiviInfoData(obj)
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200) {
        this.getData() // 刷新数据
      } else {
        this.$message({
          type: 'error',
          message: '操作出错，请刷新重试！',
          duration: 1 * 1000
        })
      }
    },
    async setUnTophandle(obj) {
      const res = await setUnTopOneActiviInfoData(obj)
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200) {
        this.getData() // 刷新数据
      } else {
        this.$message({
          type: 'error',
          message: '操作出错，请刷新重试！',
          duration: 1 * 1000
        })
      }
    },
    async drophandle(obj) {
      const res = await dropUserActiviInfoData(obj)
      const header = res.data.respOutMsgHeader
      if (header.respCode === 200) {
        this.getData() // 刷新数据
      } else {
        this.$message({
          type: 'error',
          message: '操作出错，请刷新重试！',
          duration: 1 * 1000
        })
      }
    },
    // 提交表单
    submitForm() {
      this.getData()
    },
    // 重置搜索内容
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 展示对话框
    showModal(obj, type) {
      this.$refs.activitymodal.showDialog(obj, type)
    },
    // 当前页变话时函数
    handleCurrentChange(currentPageindex) {
      // 设置当前页参数
      this.queryParma.index = currentPageindex
      this.getData() // 重新获取数据
    },
    // 是否显示置顶按钮
    isshowTophandle(obj) {
      if (obj.activityUserCode === this.usercode && obj.firstFlag === '0') {
        return false
      } else if (obj.activityUserCode === this.usercode && obj.firstFlag === '1') {
        return true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-activity {
  .user-block {

    .username,
    .description {
      display: block;
      margin-left: 50px;
      padding: 2px 0;
    }

    .username{
      font-size: 16px;
      color: #000;
    }

    :after {
      clear: both;
    }

    .img-circle {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      float: left;
    }

    span {
      font-weight: 500;
      font-size: 12px;
    }
  }

  .post {
    font-size: 14px;
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #666;

    .image {
      width: 100%;
      height: 100%;

    }

    .user-images {
      padding-top: 20px;
    }
  }

  .list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;

    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 13px;
    }

    .link-black {

      &:hover,
      &:focus {
        color: #999;
        cursor: pointer;
      }
    }
  }

}

.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}
</style>
